<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>问答-PlayGirl</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
    <style>
        .nav-underline .nav-link {
            padding-top: .75rem;
            padding-bottom: .75rem;
            font-size: .875rem;
            color: #6c757d;
        }
    </style>
</head>
<body style="background: #f2f2f2;">

<!-- 导航栏 -->
<div th:replace="~{common/header::header(activeUrl='blog')}"></div>

<main class="container mt-3 p-3 bg-white rounded" role="main">
    <div class="row">
        <div class="col-md-12 blog-main">
            <div class="col-md-12 order-md-1">
                <h4 class="mb-3">发布文章</h4>

                <form class="needs-validation" method="post" th:action="@{/blog/write}">
                    <!-- 隐藏域 -->
                    <input name="authorId" th:value="${session.loginUser.getUid()}" type="hidden">
                    <input name="authorName" th:value="${session.loginUser.getUsername()}" type="hidden">
                    <input name="authorAvatar" th:value="${session.loginUser.getAvatar()}" type="hidden">

                    <div class="row">
                        <div class="col-md-10 mb-3">
                            <label for="firstName">文章标题</label>
                            <input class="form-control" id="firstName" name="title" required type="text" value="">
                        </div>

                        <div class="col-md-2 mb-3">
                            <label for="country">文章标签</label>
                            <select class="custom-select d-block w-100" id="country" name="categoryId">
                                <option th:each="category:${categoryList}"
                                        th:text="${category.getCategory()}" th:value="${category.getId()}">
                                </option>
                            </select>
                        </div>

                        <div class="col-md-12 mb-3">
                            <p>文章内容</p>
                            <div id="blog-content">
                                <textarea class="form-control" id="content" name="content" required rows="3"
                                          style="display:none;"> </textarea>
                            </div>
                        </div>

                    </div>

                    <button class="btn btn-primary btn-lg btn-block" type="submit">发布文章</button>
                </form>
            </div>
        </div>
    </div>
</main>

<div th:replace="~{common/footer::footer}"></div>

<a class="to-top">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>

<script th:src="@{/editormd/editormd.js}"></script>
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd("blog-content", {
            width: "100%",
            height: 500,
            syncScrolling: "single",
            path: "/editormd/lib/",
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            // [TOCM]  [TOC] 自动生成目录
            tocm: true,
            tocContainer: "",
            tocDropdown: false,
            tocStartLevel: 1,     // Parse beginning of H2, Default value 1
            emoji: true,
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            //图片上传
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/question/write/file/upload",
            onload: function () {
                console.log('onload', this);
            },
            /*指定需要显示的功能按钮*/
            toolbarIcons: function () {
                return ["undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image",
                    "code-block", "table", "datetime", "emoji", "html-entities", "|",
                    "search", "watch", "preview", "fullscreen"]
            },
            onfullscreen: function () {
                console.log("onfullscreen");
                document.getElementsByClassName("navbar")[0].style.display = "none";
            },
            onfullscreenExit: function () {
                console.log("onfullscreenExit");
                document.getElementsByClassName("navbar")[0].style.display = "";
            }
        });
    });
</script>

</body>
</html>